<template>
  <div id="app">
    <div class="head">
      <div class="logo"><img src="./assets/logo.png" alt=""></div>
      <header>
        <router-link  :class="{active: $route.name=='Main'}" to="/">首页</router-link>
        <router-link  :class="{active: $route.name=='Song' || $route.name=='SongInfo'}" to="/song">歌单</router-link>
        <router-link  :class="{active: $route.name=='Singer' || $route.name=='SingerInfo'}" to="/singer">歌手</router-link>
        <router-link  :class="{active: $route.name=='VIP'}" to="/vip">VIP</router-link>
        <a href="https://music.taihe.com/player" target="blank">音乐盒</a>
      </header>
      <div class="search">
        <div class="input">
          <input type="text" placeholder="请输入歌名、歌词、歌手或专辑" v-model="searchValue">
          <i class="iconfont icon-search1" @click="goSearch"></i>
        </div>
        <span @click="isLogin" v-show="!isUser">登录/注册</span>
        <span v-show="isUser" style="margin-right:5px">冰糖葫芦</span> 
        <img v-show="isUser" src="./assets/touxiang.jpg" style="width: 32px;
    height: 32px;border-radius: 50%;">
        <span v-show="isUser"  @click="cancel" style="margin-left:5px">注销</span>
      </div>   
    </div>   
  
    <router-view/>
    
    <live/>
    <foot/>
    <login :isshow="show" />
  </div>
</template>

<script>
import live from './components/Live.vue'
import foot from './components/Footer.vue'
import login from './components/login.vue'

export default {
  components: {live,foot,login},
  data(){
    return{
      show : {isshow:false},
      isUser:false,
      searchValue:''
    }
  },
  methods:{
    isLogin(){
      this.show.isshow = !this.show.isshow
     
    },
    cancel(){
       window.localStorage.setItem('account','')
         this.$router.go(0);
    },
    goSearch(){
      this.$router.push({
        path:'/search',
        query:{
          keywords:this.searchValue
        }
      })
    }
  },
  mounted(){
  if(window.localStorage.getItem('account')){
    this.isUser = true
  }
  }
}


</script>

<style>
  *{
    margin: 0;
    padding: 0;
    outline: none;
  }
  .head,.liveBox{
    min-width: 1108px;
  }
  header{
    min-width: 307px;
  }

  #nprogress .bar {
    background: red !important;
  }

  #app{
    position: relative;
  }
  .el-progress .el-progress-bar{
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
  }
  .el-progress .el-progress__text{
    display: none;
  }


  .head{
    height: 80px;
    box-shadow: 0 2px 10px 0 rgba(52,52,52,.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10vw;
  }
  .head .search{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .head .search .input{
    width: 320px;
    height: 40px;
    background-color: #f8f8f8;
    margin-right: 20px;
  }
  .head .search .input input{
    border: none;
    outline: none;
    width: 80%;
    height: 100%;
    background-color: #f8f8f8;
    padding-left: 20px;
    color: #909399;
  }
  .head .search .input i{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
  .head .search span{
    color: #606266
  }
  .logo img{
    width: 160px;
    height: 40px;
  }
  header {
    width: 20vw;
    display: flex;
    justify-content: space-between;
  }
  header a {
    height: 100%;
    line-height: 80px;
    text-decoration: none;
    font-weight: normal;
    color: #909399;
  }
  header a.active {
    font-weight: bold;
    color: #000;
    border-bottom: 2px solid #000;
  }
</style>
